<template>
  <div class="leave-detail-page">
    <!-- 步骤导航 -->
    <div class="step-nav">
      <div class="step-item active">
        <div class="step-num">1</div>
        <div class="step-text">申请请假</div>
      </div>
      <div class="step-item active">
        <div class="step-num">2</div>
        <div class="step-text">申请审批</div>
      </div>
      <div class="step-item">
        <div class="step-num">3</div>
        <div class="step-text">请假审批</div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧列：基本信息和申请信息 -->
      <div class="left-column">
        <!-- 基本信息 -->
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span class="section-title">基本信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="单据编号">
              {{ leaveRequest.docNo }}
            </el-descriptions-item>
            <el-descriptions-item label="老人姓名">
              {{ leaveRequest.elderName }}
            </el-descriptions-item>
            <el-descriptions-item label="老人身份证号">
              {{ leaveRequest.elderIdCard }}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">
              {{ leaveRequest.companionContact }}
            </el-descriptions-item>
            <el-descriptions-item label="护理等级">
              {{ leaveRequest.careLevel }}
            </el-descriptions-item>
            <el-descriptions-item label="入住床位">
              {{ leaveRequest.floor }}{{ leaveRequest.room }}房{{ leaveRequest.bed }}床
            </el-descriptions-item>
            <el-descriptions-item label="护理员">
              {{ leaveRequest.nickName }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 申请信息 -->
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span class="section-title">申请信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="陪同人">
              <!-- 若陪同人姓名为空，显示“无” -->
              {{ leaveRequest.companionName || '无' }}
            </el-descriptions-item>
            <el-descriptions-item label="请假周期">
              {{ leaveRequest.leaveStart }} — {{ leaveRequest.expectedReturn }}
            </el-descriptions-item>
            <el-descriptions-item label="请假天数">
              {{ leaveRequest.leaveDays }} 天
            </el-descriptions-item>
            <el-descriptions-item label="请假原因">
              {{ leaveRequest.leaveReason }}
            </el-descriptions-item>
            <el-descriptions-item label="申请人">
              {{ leaveRequest.createName }}
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">
              {{ leaveRequest.createdAt }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <!-- 右侧列：审批结果和操作记录 -->
      <div class="right-column">
        <!-- 审批结果 -->
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span class="section-title">审批结果</span>
            </div>
          </template>
          <el-form :model="approvalForm" :rules="approvalRules" ref="approvalFormRef">
            <el-form-item label="审批结果" prop="approvalStatus" class="form-item">
              <el-radio-group v-model="approvalForm.approvalStatus">
                <el-radio label="1">审批通过</el-radio>
                <el-radio label="2">审批拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见" prop="approvalOpinion" class="form-item">
              <el-input
                  v-model="approvalForm.approvalOpinion"
                  type="textarea"
                  placeholder="请输入审批意见"
                  :rows="4"
                  maxlength="200"
                  show-word-limit
              />
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 操作记录 -->
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span class="section-title">操作记录</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
                timestamp="2048-10-05 15:00:00"
                placement="top"
                type="primary"
            >
              <el-card>
                <h4>发起申请-申请请假</h4>
                <p>顾廷烨（已发起）</p >
              </el-card>
            </el-timeline-item>
            <el-timeline-item
                timestamp="2048-10-05 16:00:00"
                placement="top"
                type="primary"
            >
              <el-card>
                <h4>(角色) 审批-申请审批</h4>
                <p>盛明兰（审批中）</p >
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
    </div>

    <!-- 按钮区域 -->
    <div class="action-buttons">
      <el-button @click="handleBack">返回</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
import { approvalComplete,listLeaveRequest,addApprovalRecord } from "@/api/residing/leaveRequest";

const router = useRouter()
const route = useRoute()
const approvalFormRef = ref()
const taskId = ref()

// 请假表数据
const leaveRequest = ref({
  docNo: '',              //单据编号
  elderId: '',           //老人id
  elderName: '',          //老人姓名
  elderIdCard: '',        //老人身份证号
  mobile: '',             //老人联系方式
  careLevel: '',          //老人护理等级
  bedNo: '',              //老人入住床位
  nickName: '',           //护理员姓名
  companionType: '',       //陪同人类型
  companionName: '',      //陪同人姓名
  companionContact: '',   //陪同人联系方式
  leaveStart: '',         //请假开始时间
  expectedReturn: '',     //预计返回时间
  leaveDays: '',          //请假天数
  leaveReason: '',         //请假原因
  createName: '',         //申请人姓名
  createdAt: '',         //申请时间
  approvalUser: '',        //审批人id
  approvalUserRole: '',       //审批人角色
})
// 审批表单数据
const approvalForm = reactive({
  approvalStatus: '1',     // 审批状态(1:通过,2:拒绝)
  approvalOpinion: ''     // 审批意见
})

// 表单验证规则
const approvalRules = {
  approvalStatus: [
    { required: true, message: '请选择审批结果', trigger: 'change' }
  ],
  approvalOpinion: [
    { required: true, message: '请输入审批意见', trigger: 'blur' }
  ]
}

// 返回按钮
const handleBack = () => {
  router.push({
    name: 'Tasking'
  })
}

// 提交审批
const handleSubmit = async () => {
  if (!approvalFormRef.value) return
  try {
    await approvalFormRef.value.validate()
    const submitData = {
      elderId:leaveRequest.value.elderId,
      businessId:leaveRequest.value.businessId ,          // 流程id
      approvalOpinion: approvalForm.approvalOpinion,     // 审批意见
      approvalType: '2',     // 审批类型(1:退住,2:请假,3:入住)
      approverId:leaveRequest.value.approvalUser ,          //审批人id
      approverName:leaveRequest.value.createName ,        //审批人姓名
      approverRole: leaveRequest.value.approvalUserRole,       //审批人角色
      currentStep: leaveRequest.value.currentStep ,        //当前审批步骤
      approvalStatus: approvalForm.approvalStatus,     //审批状态(1:通过,2:拒绝)
    };
    console.log(submitData)
    await addApprovalRecord(submitData)
    submitData.businessId = taskId.value
    submitData.leaveDays = leaveRequest.value.leaveDays
    submitData.careLevel = leaveRequest.value.careLevel
    await approvalComplete(submitData).then(res => {
      if (res.code === 200) {
        ElMessage.success('审批提交成功')
        router.push({
          name: 'Tasking'
        })
      } else {
        ElMessage.error('审批提交失败: ' + (res.message || ''));
      }
    })
  } catch (error) {
    console.log(error)
    ElMessage.warning('请完善表单信息')
  }
}

// 页面加载时获取合同详情
onMounted(() => {
  taskId.value = route.query.taskId // 获取路由参数中的合同ID
  console.log(taskId.value)
  listLeaveRequest({businessId: taskId.value}).then(res => {
    if (res.code === 200) {
      leaveRequest.value = res.rows[0]
      console.log(res.rows[0])
    } else {
      ElMessage.error('获取请假详情失败: ' + (res.message || ''));
    }
  })
})

</script>

<style scoped>
.leave-detail-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.step-nav {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 50px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step-item::before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background-color: #e5e7eb;
  z-index: 1;
}

.step-item:first-child::before {
  display: none;
}

.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
  font-size: 14px;
}

.step-item.active .step-num {
  background-color: #409eff;
}

.step-item:not(.active) .step-num {
  background-color: #dcdcdc;
}

.step-text {
  color: #606266;
  font-size: 14px;
}

.step-item.active .step-text {
  color: #409eff;
  font-weight: 500;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.left-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.form-item {
  margin-bottom: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-timeline) {
  padding-left: 0;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 13px;
}

.action-buttons {
  text-align: center;
  margin-top: 30px;
  padding: 20px 0;
}

.action-buttons .el-button {
  margin: 0 10px;
  min-width: 100px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
  }

  .step-nav {
    padding: 0 20px;
  }
}
</style>